<template>
    <div class="notic-bar">
        <div class="notic-bar-container">
            <div id="notic-bar__wrap">
                <!-- <div  v-for="(item,index) in list" :key="index" class="notic-bar__wrap_text" >
                    {{ item.content }}
                </div> -->
                <div> {{  list[0].content }}</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "noticBar",
    props:{
        list:{
            type:Array,
            default () {
                return [];
            },
        }
    },
    data() {
        return {
            // list:[
            //     "测试",
            // ]
        }
    },
    mounted() {
        this.move();
    },
    methods: {
         move() {
            // 获取内容区宽度
            let width = document.getElementById("notic-bar__wrap").scrollWidth;
            let marquee = document.getElementById("notic-bar__wrap");
            let speed = 10; // 位移距离
            // 设置位移
            setInterval(function() {
                speed = speed - 1;
                // 如果位移超过文字宽度，则回到起点

                if (-speed >= width) {
                speed = 1180;
                }
                marquee.style.transform = "translateX(" + speed + "px)";
            }, 10);
            }
        }
}
</script>
<style lang="less" scoped>
.notic-bar{
    display:flex;
    background: #67c23a;
    margin: 5px;
    border-radius: 5px;
    padding: 2px 5px;
    .notic-bar-container{
        display: flex;
        width: calc(100% - 30px);
        height: 20px;
        overflow: hidden;
        margin-left: 5px;
        #notic-bar__wrap{
            margin-left: 10px;
            display:flex;
            // animation: move 10s linear infinite;
            line-height: 20px;
            color: #f5f6f7;
            .notic-bar__wrap_text{
                width: max-content;
                min-width: 100px;
                margin-left: 10px;
            }
        }
    }
}
@keyframes move{
    0%{
        transform: translateX(100%);
    }
    100%{
        transform: translateX(-100%);
    }

}
</style>